<template>
  <div class="div1" :class="isWidth?'div2':''">{{ isWidth }}</div>
  <el-button @click="widthWay">demo变宽</el-button>
</template>

<script setup>
import {ref} from 'vue'

let isWidth = ref(0)
const widthWay = () => {
  isWidth.value = !isWidth.value ? 1 : 0
}
</script>

<style scoped>
.div1 {
  width: 10rem;
  height: 100px;
  border: 1px solid #000000;
  transition: width 1s ease-in-out;
}

.div2 {
  width: 20rem;
}
</style>